<template>
    <div>
      <h1>爷爷组件: {{monkey}}</h1>
      <hr>
      <son></son>
    </div>
</template>

<script>
import son from './son.vue'
import { ref, provide } from 'vue'
/**
 * 跨多级组件通信方案：依赖注入
 * 1. 在共享数据的组件中使用：provide('共享数据key', 共享数据data) =》注入
 * 2. 在共享数据的组件下的组件：const 接收共享数据 = inject('共享数据key')
 */
export default {
  components: {
    son
  },
  setup () {
    const monkey = ref(1e6)
    // 注入共享数据
    provide('rmb', monkey)
    return { monkey }
  }
}
</script>

<style lang="scss" scoped>

</style>
